<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload=function(){
		//查询节点;		
		//1.根据ID查询节点
		//2.根据标签名查询节点
		//3.根据name查询节点
			var radios=document.getElementsByName("sex");
			console.log(radios);
		//4.根据层次(关系)查询节点
			var gz=document.getElementById("gz");
			//(1)查询某节点的父亲
			var ul=gz.parentNode;
			console.log(ul);
			//(2)查询某节点的孩子(带文本)
			var lis=gz.childNodes;
			console.log(lis);
			//(3)查询某节点的孩子(不带节点)
			lis=ul.getElementsByTagName("li");
			console.log(lis);
			var sh=
				gz.parentNode.getElementsByTagName("li")[1];
			console.log(sh);
			
			
	}	
	
	function f1(){
		//创建新节点
		var li=document.createElement("li");
		//修改此li
		li.innerHTML="天津";
		//追加新节点
		var city=document.getElementById("city");
		city.appendChild(li);
	
	}
	function f2(){
		//创建节点
		var sz=document.createElement("li");
		sz.innerHTML="苏州";
		var city=document.getElementById("city");
		var gz=document.getElementById("gz");
		city.insertBefore(sz,gz);
		
		
	}
	function f3(){
		//通过父亲删除孩子
		var city=document.getElementById("city");
		var gz=document.getElementById("gz");
		city.removeChild(gz);
		
	}
	
	
	
	
</script>

</head>
<body>
	<input type="radio" name="sex"/>男
	<input type="radio" name="sex"/>女
	<ul id="city">
		<li>北京	</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
	 
	</ul>
	
	<input type="button" value="增加"
		onclick="f1();"/>
	<input type="button" value="插入"
		onclick="f2();"/>
	
	<input type="button" value="删除"
		onclick="f3();"/>
	
</body>
</html>










